<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 <div id="app">
   <!-- 选择一个 -->
   <div>
     <select name="abc" id="abc" v-model="fruit">
       <option value="苹果">苹果</option>
       <option value="香蕉">香蕉</option>
       <option value="榴莲">榴莲</option>
       <option value="葡萄">葡萄</option>
     </select>
     <h2>你选择的水果是：{{fruit}}</h2>
   </div>


   <!-- 选择一个 -->
   <div>
     <select name="abc2" id="abc2" v-model="fruits" multiple>
       <option value="苹果">苹果</option>
       <option value="香蕉">香蕉</option>
       <option value="榴莲">榴莲</option>
       <option value="葡萄">葡萄</option>
     </select>
     <h2>你选择的水果是：{{fruits}}</h2>
   </div>

  </div>


     <script src="js/vue.js"></script>
     <script>
       const app=new Vue({
         el: '#app',
         data: {
           message:'你好vue',
           fruit:'香蕉', //选择一个
           fruits:[], //选择多个
         }
       })
     </script>
</body>
</html>